<template>
    <ECH :option="option" v-if="Flag"></ECH>
</template>

<script setup lang="ts">
import ECH from './ECharts/ECH.vue';
import {ref, onMounted } from 'vue';
const  option = ref({

  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['Email', 'Adss', 'Ads', 'Di', 'Search'],
    textStyle:{
      color:"#fff"
    }
  },
  grid: {
    left: '3%',
    // top:'20%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },

  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Se']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: 'Email',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Adss',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Ads',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: 'Di',
      type: 'line',
      stack: 'Total',
      data: [320, 332, 301, 334, 390, 330, 320]
    },
    {
      name: 'Se',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
});

const Flag = ref<any>(false)// 定义一个 ref，用于标识是否需要更新数据
const getznleftbotton = function (){  // 定义一个函数，用于获取数据并更新图表
   let ws = new WebSocket("ws://localhost:3002/bigscreen/websockets?id=10086")// 创建 WebSocket 连接
   ws.onmessage = function(res){  // 监听 WebSocket 接收到的消息
  //  console.log(res,'学生分布');
  //  console.log(JSON.parse(res.data),'asanas');
       let {legendData,seriesData} = JSON.parse(res.data);// 解析消息中的图例数据和系列数据
       let SeriesData = [];
       for(let i=0;i<seriesData.length;i++){
           let serdata = {
              name:legendData[i], // 使用图例数据设置系列名称
              type:'line', // 设置系列类型为线性图
              stack:'Total',  // 设置堆叠方式为总量堆叠
              smooth:true, // 设置曲线平滑
              data:seriesData[i]// 使用系列数据设置数据
           }
           SeriesData.push(serdata)// 将处理后的系列数据添加到 SeriesData 数组中
       }
       option.value.legend.data = legendData; // 更新图例数据
       option.value.xAxis.data = legendData;// 更新 X 轴数据
       option.value.series = SeriesData; // 更新系列数据
       Flag.value = true;  // 设置标志位为 true，表示数据已更新
   }; 
};
onMounted(()=>{
  getznleftbotton() // 在组件挂载后调用函数，获取并更新图表数据
})

setInterval(()=>{
  Flag.value = false;
  getznleftbotton()
},3000)

</script>

<style scoped>
#main{
    width: 100%;
    height: 100%;
}
</style>